<template>
    <div class="wrapper">
		<div class="header">
			好友列表<router-link :to="{path: 'addFriend'}" tag="span" style="position:absolute;right:.4rem;font-size:.3rem;color:#0096ff">加好友</router-link>
		</div>
		<div class="content">
			<div class="search">
				<div class="text">
					<input type="text" placeholder="搜索">
				</div>
				<span class="search_btn"><img src="img/search_btn.png" alt=""></span>
			</div>
			<div class="list">
				<router-link :to="{path: '/newFriend'}">
				<div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">新的朋友</span>
						</div>
						<div class="circle" v-if="newApply!=0">{{newApply}}</div>
					</div>
				</div>
				</router-link>
				<div class="list_wrapper" @click="goGroupApplyJoinList()">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">群组</span>
						</div>
						<div class="circle" v-if="group.ApplyJoinGroup.length != 0">{{group.ApplyJoinGroup.length}}</div>
					</div>
				</div>
				<router-link :to="{path: '/blackItem'}">
				<div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">黑名单</span>
						</div>
						<!--<div class="circle">1</div>-->
					</div>
				</div>
				</router-link>
				<router-link :to="{path: '/createGroup'}">
				<div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">创建群</span>
						</div>
						<!--<div class="circle">1</div>-->
					</div>
				</div>
				</router-link>
				<router-link :to="{path: '/addGroup'}">
				<div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">加入群</span>
						</div>
						<!--<div class="circle">1</div>-->
					</div>
				</div>
				</router-link>
				<router-link :to="{path: '/groupList'}">
				<div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/add_friend.png" alt="">
							<span class="item_title">群列表</span>
						</div>
						<!--<div class="circle">1</div>-->
					</div>
				</div>
				</router-link>
				<div class="parting_line"></div>
                <section class="friend-list">
					<router-link class="list_wrapper" v-for="item in friendList" v-if="friendList.length>0" :to="{path: 'session', query:{id: item.Info_Account,selType:'C2C'}}" tag="div">
						<div class="list_item2">
							<div class="list_item2_left">
								<img :src="item.Tag_Profile_IM_Image?item.Tag_Profile_IM_Image:''" @click.stop="friendDetail(item.Info_Account)">
							</div>
							<div class="list_item2_right">
								<span class="friend_name">{{item.Tag_Profile_IM_Nick?item.Tag_Profile_IM_Nick:item.Info_Account.substr(0, 7) + "..."}}</span>
								<span class="friend_desc" v-if="item.Tag_Profile_IM_SelfSignature">{{item.Tag_Profile_IM_SelfSignature}}</span>
							</div>
						</div>
					  <div class="contrl-list">
								<span @click.stop="pushBlack(item.Info_Account)">拉黑</span>
								<span @click.stop="pushTop()">其他</span>
						</div>
					</router-link>
				</section>
			</div>
		</div>
	</div>
</template>

<script>
//import {cityGuess, hotcity, groupcity} from '../../service/getData'
import $ from "jquery";
import Client from "../../config/common";
export default {
  data() {
    return {
		friendList:[],
		loginInfo:{},
		newApply:0,//新的好友申请通知
		group:{
			ApplyJoinGroup: [] // 加群信息数量
		}
	  };
  },
  mounted() {
    Client.login((loginInfo) => {
			 this.getAll(loginInfo);
			 this.loginInfo = loginInfo;
			 this.getPendency();

			 // 获取群组申请加入
			 this.pendencyGroupList();
		});
		this.slider();
  },
  watch:{

		// 在线监听申请加群信息
		"loginInfo.onApplyJoinGroupRequestNotify": function(val,oldval){ 
			if(val.groupReportTypeMsg){
				// 申请加群信息数
				this.group.ApplyJoinGroup.push(val);
				Client.log("申请加群待审核数",this.group.ApplyJoinGroup);
					
			}
		},

		'loginInfo.onPendencyAddNotify':function(val){  
			console.log('监听新申请',val);
			if(val.PendencyList){
				this.newApply += val.PendencyList.length;
			}
			//this.newApply += val.PendencyList.length;
			//console.log('666666666',this.newApply);
    }//,  
    //deep:true//对象内部的属性监听，也叫深度监听  
   
	},
  components: {
  },

  computed: {

	},
  methods: {

		// 跳转群组申请列表
		goGroupApplyJoinList() {
			// sessionStorage.applyList = JSON.stringify(this.group.ApplyJoinGroup);
			// console.log(this.group.ApplyJoinGroup);
			 this.$router.push({path: '/GroupApplyJoinList'});
		},
        ////读取好友申请列表
		getPendency() {
			//initGetPendencyTable([]);
			let options = {
				'From_Account': this.loginInfo.identifier,
				'PendencyType': 'Pendency_Type_ComeIn',
				'StartTime': 0,
				'MaxLimited': 100,
				'LastSequence': 0
			};
			webim.getPendency(
					options,
					(resp) => {
						console.log('好友申请',resp);
						if (resp.UnreadPendencyCount > 0) {
							this.newApply += resp.UnreadPendencyCount;
						}
					},
					function (err) {
						alert(err.ErrorInfo);
					}
			);
		},
		// 初始化申请加群列表
		pendencyGroupList() {
			let That = this;
			webim.getPendencyGroup({
						'StartTime': 0,//开始时间
						'Limit': 100 //一次最多获取十条
				}, function(resp) {
					console.log("初始化申请加群列表");
					if(resp.PendencyList){
						for(let i = 0; i< resp.PendencyList.length; i++){
							That.group.ApplyJoinGroup.push(resp.PendencyList[i])
						}
					}
					console.log(resp);
					console.log("初始化申请加群列表");
			})
		},

	//获取全部好友
    getAll(loginInfo) {	
		//Client.log(loginInfo);
      let getAllFriend = (cbOK, cbErr) => {
        let options = {
          From_Account: loginInfo.identifier,
          TimeStamp: 0,
          StartIndex: 0,
          GetCount: 100, //totalCount,
          LastStandardSequence: 0,
          TagList: [
            "Tag_Profile_IM_Nick",
            "Tag_Profile_IM_SelfSignature", //个性签名
            "Tag_Profile_IM_Image", //头像
            "Tag_Profile_IM_Gender", //性别
            "Tag_Profile_IM_AllowType", //加好友验证方式
            "Tag_Profile_IM_Location", //所在地
						"Tag_Profile_IM_BirthDay", //生日
						"Tag_Profile_IM_MsgSettings" //消息设置 置0表示接收消息，置1则不接收消息
          ]
        };
        webim.getAllFriend(
          options,
          (resp) => {
            Client.log(resp);
        if (resp.FriendNum > 0) {
			  //转化成对象挂载到数据
          for(let i=0;i<resp.InfoItem.length;i++){
						if(resp.InfoItem[i].SnsProfileItem){
							let sns = resp.InfoItem[i].SnsProfileItem;
							sns.forEach((ele,index) => {
							resp.InfoItem[i][ele.Tag]=ele.Value;
							});
					//清空原来的resp.InfoItem[i].SnsProfileItem = '';
				    }
			    }

			  this.friendList = resp.InfoItem;
			  Client.log(this.friendList);
              let friends = resp.InfoItem;
              //存储好友列表
			  Client.setStore('friendList',friends);
			  //Client.log(Client.getStore('friendList'));
              if (cbOK) cbOK();
            }
          },
          function(err) {
            alert(err.ErrorInfo);
          }
        );
	  };
	  getAllFriend();
	},
	friendDetail(id){
		this.$router.push({path:'/friendDetail', query:{id}});
	},
	slider(){
		let initX,moveX,X = 0,objX = 0;
		let aimEle = document.querySelector('.friend-list');
		aimEle.addEventListener('touchstart',function(event){
			event.preventDefault();
			let obj = event.target.parentNode;
			if(obj.className == "list_wrapper"){
				initX = event.targetTouches[0].pageX;
				objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
			}
			if( objX == 0){
				aimEle.addEventListener('touchmove',function(event) {
					event.preventDefault();
					let obj = event.target.parentNode;
					if (obj.className == "list_wrapper") {
						moveX = event.targetTouches[0].pageX;
						X = moveX - initX;
						if (X > 0) {
							obj.style.WebkitTransform = "translateX(" + 0 + "px)";
						}
						else if (X < 0) {
							let l = Math.abs(X);
							obj.style.WebkitTransform = "translateX(" + -l + "px)";
							if(l>160){
								l=160;
								obj.style.WebkitTransform = "translateX(" + -l + "px)";
							}
						}
					}
				});
			}
			else if(objX<0){
			  aimEle.addEventListener('touchmove',function(event) {
					event.preventDefault();
					let obj = event.target.parentNode;
					if (obj.className == "list_wrapper") {
						moveX = event.targetTouches[0].pageX;
						X = moveX - initX;
						if (X > 0) {
							//向右滑动还原
							let r = -20 + Math.abs(X);
							obj.style.WebkitTransform = "translateX(" + r + "px)";
							if(r>0){
								r=0;
								obj.style.WebkitTransform = "translateX(" + r + "px)";
							}
						}
						else {     //向左滑动
							obj.style.WebkitTransform = "translateX(" + -160 + "px)";
						}
					}
				});
			}

		})
		aimEle.addEventListener('touchend',function(event){
			event.preventDefault();
			let obj = event.target.parentNode;
			if(obj.className == "list_wrapper"){
				objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
				if(objX>-40){
					obj.style.WebkitTransform = "translateX(" + 0 + "px)";
				}else{
					obj.style.WebkitTransform = "translateX(" + -160 + "px)";
				}
			}
		 })
	},
	pushBlack(account){
		//添加黑名单
    let options = {
        'From_Account': this.loginInfo.identifier,
        'To_Account': [account]
    };
    webim.addBlackList(
            options,
            (resp) => {
                this.deleteFriendList(account);
            },
            (err) => {
                alert(err.ErrorInfo);
            }
    );
   },
   //通用删除好友列表视图
    deleteFriendList(account){
	   console.log(this.friendList);
	   this.friendList.forEach((ele,i) => {
			if(ele.Info_Account == account){
				this.friendList.splice(i,1);
			}
	   });
    }
	}
};
</script>

<style lang="scss">
@import "../../style/friend_list";
.friend-list{
	overflow: hidden;
	.list_wrapper{
		position:relative;
    -webkit-transform: translateX(0px);
		.contrl-list{
			display:-webkit-box;
			height:100%;
			position: absolute;
			width:160px;
			top:0;
			right:-160px;
			span{
				display: flex;
				align-items: center;
				justify-content:center;
				-webkit-box-flex:1.0;
				color:#fff;
				&:first-child{
					background-color:red;
				}
				&:last-child{
					background-color:blue;
				}
			}
		}
	}
}
</style>